<template>
  <div>
    <Bread1 :breadtitle="breadtitle"></Bread1>

    <a-row :gutter="20">
      <a-col :span="8">
        <!-- 搜索 -->
        <a-input-search
          placeholder="请输入搜索内容"
          enter-button
          allowClear
          @search="getGoodsList"
          v-model="queryInfo.query"
        />
      </a-col>
      <a-col :span="4">
        <!-- 添加 -->
        <a-button type="primary" @click="$router.push('/goods/add')">
          添加商品
        </a-button>
      </a-col>
    </a-row>

    <!-- 商品表格 -->
    <a-table
      class="table"
      :pagination="false"
      :columns="columns"
      :data-source="goodslist"
      rowKey="goods_id"
    >
      <span slot="time" slot-scope="text, record">
        {{ record.add_time | timeout }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-space>
          <a-button type="primary" @click="$router.push({path:'/goods/alter',query:{id:record.goods_id}})"> 详情 </a-button>
          <a-popconfirm
            title="确认删除?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(record)"
          >
            <a-button type="danger"> 删除 </a-button>
          </a-popconfirm>
        </a-space>
      </span>
    </a-table>

    <!-- 分页 -->
    <a-pagination
      v-model="queryInfo.pagenum"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="queryInfo.pagesize"
      @showSizeChange="onShowSizeChange"
      @change="onChange"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-if="props.value === '50'">全部</span>
      </template>
    </a-pagination>
  </div>
</template>

<script>
import { reqGoodsList, reqDelGood } from "@/api";
import Bread1 from "@/components/bread/Bread1";
import { timeout } from "@/utils/time";
export default {
  data() {
    return {
      // 面包屑
      breadtitle: ["商品管理", "商品列表"],
      //查询参数
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      //商品列表数据
      goodslist: [],
      //总页数
      total: 0,
      //表格cloumns
      columns: [
        {
          title: "序号",
          customRender: (text, record, index) => `${index + 1}`,
          align: "center",
          width: "70px",
        },
        {
          title: "商品名称",
          dataIndex: "goods_name",
          key: "goods_name",
        },
        {
          title: "价格（元）",
          dataIndex: "goods_price",
          key: "goods_price",
          align: "center",
        },
        {
          title: "重量（kg）",
          dataIndex: "goods_weight",
          key: "goods_weight",
          align: "center",
        },
        {
          title: "创建事件",
          scopedSlots: { customRender: "time" },
          key: "add_time",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      //   分页pageSizeOptions属性
      pageSizeOptions: ["10", "20", "30", "40", "50"],
    };
  },
  filters: { timeout },
  components: { Bread1 },
  created() {
    this.getGoodsList();
  },
  methods: {
    //商品列表网络请求
    async getGoodsList() {
      let res = await reqGoodsList(this.queryInfo);
      if (res.meta.status == 200) {
        this.goodslist = res.data.goods;
        this.total = res.data.total;
      }
    },
    // 页数切换
    onChange(page, pageSize) {
      this.queryInfo.pagenum = page;
      this.getGoodsList();
    },
    onShowSizeChange(current, pageSize) {
      this.queryInfo.pagesize = pageSize;
      this.getGoodsList();
      this.$forceUpdate();
    },
    // 删除商品
    async confirm(record) {
      let res = await reqDelGood(record.goods_id);
      if (res.meta.status !== 200) {
        this.$message.error("删除失败！");
      }
      this.$message.success("删除成功！");
      this.getGoodsList();
    },
  },
};
</script>

<style lang="less" scoped>
.table{
    margin-top: 15px;
}
</style>